import styles from "./index.module.scss";
import { Pagination, Tooltip } from "antd";
import { useDispatch, useSelector } from "react-redux";
import closeBtn from "@/assets/public/close-btn.png";
import closeBtnLight from "@/assets/public/close-btn-light.png";
import { setLayersLevel2 } from "@/store";

export default function Model(props) {
  const dispatch = useDispatch();
  const { name } = props;
  const theme = useSelector((state) => state.theme);
  const layers = useSelector((state) => {
    return state.layersLevel2;
  });
  const handleClose = () => {
    dispatch(
      setLayersLevel2({
        query: {},
        name: "",
        other: {},
      })
    );
  };

  const getValue = (value) => {
    console.log(value);
  };
  return (
    <div className={styles.model}>
      <header className={styles.header}>
      {theme ? (
          <img
            style={{
              width: "20px",
              height: "22px",
            }}
            onClick={handleClose}
            src={closeBtnLight}
            alt="加载中..."
          />
        ) : (
          <img
            style={{
              width: "20px",
              height: "22px",
            }}
            onClick={handleClose}
            src={closeBtn}
            alt="加载中..."
          />
        )}
        <span className={styles.title}>{name}</span>
      </header>
      <div className={styles.detail}>
        <div className={styles.detailLine}>
          <div className={styles.detailName}>一级项目</div>
          <div className={styles.detailContent}>
            <span
              className="text-overflow"
              title="454564564564564564654564545645645645645646545645456456456456456465456"
            >
              454564564564564564654564545645645645645646545645456456456456456465456
            </span>
          </div>
          <div className={styles.detailName}>二级项目</div>
          <div className={styles.detailContent}>
            <span
              className="text-overflow"
              title="某某二级项目某某二级项目某某二级项目某某二级项目某某二级项目某某二级项目"
            >
              某某二级项目某某二级项目某某二级项目某某二级项目某某二级项目某某二级项目
            </span>
          </div>
          <div className={styles.detailName}>加班费</div>
          <div className={styles.detailContent}>
            <span className="text-overflow" title="56456">
              56456
            </span>
          </div>
        </div>
        <div className={styles.detailLine}>
          <div className={styles.detailName}>里程</div>
          <div className={styles.detailContent}>
            <span className="text-overflow" title="239.2公里">
              239.2公里
            </span>
          </div>
          <div className={styles.detailName}>油费</div>
          <div className={styles.detailContent}>
            <span className="text-overflow" title="2658">
              2658
            </span>
          </div>
          <div className={styles.detailName}>租赁费</div>
          <div className={styles.detailContent}>
            <span className="text-overflow" title="56456">
              56456
            </span>
          </div>
        </div>
        <div className={styles.detailLine}>
          <div className={styles.detailName}>路桥费</div>
          <div className={styles.detailContent}>
            <span className="text-overflow" title="239.2">
              239.2
            </span>
          </div>
          <div className={styles.detailName}>停车费</div>
          <div className={styles.detailContent}>
            <span className="text-overflow" title="2658">
              2658
            </span>
          </div>
          <div className={styles.detailName}>其他费用</div>
          <div className={styles.detailContent}>
            <span className="text-overflow" title="56456">
              56456
            </span>
          </div>
        </div>
        <div className={styles.detailLine}>
          <div className={styles.detailName}>费用合计</div>
          <div className={styles.detailContent}>
            <span className="text-overflow" title="239.2">
              239.2
            </span>
          </div>
          <div className={styles.detailName}>月份</div>
          <div className={styles.detailContent}>
            <span className="text-overflow" title="10月">
              10月
            </span>
          </div>
          <div className={styles.detailName}></div>
          <div className={styles.detailContent}>
            <span className="text-overflow" title=""></span>
          </div>
        </div>
      </div>
    </div>
  );
}
